import { Component } from "react";
import { Header, HTitle, HMenu } from "../components/header"
import { BMap } from "../components/simple";
import Mapol from "../modules/Map2D/Map";
import { Line, Kml } from "../modules/Map2D/layers";
import { RouteList } from "../routers/route";




const ID2D = 'OLID2D';
/**
 * 主程序入口
 */
export default class Main extends Component {
    Mapols; //二维地图
    /***
     *  模板加载完之后数据初始化
     */
    state = {
        RouteLists: RouteList,
        routeCurrect: 0,
        ScreenElement: (e) => { return (<></>) },
        regionId: 1,
    }
    componentDidMount() {
        this.initMap();
        this.setSecne(0)
    }
    /**
     * 地图初始化
     */
    initMap = () => {
        /**
         * 二维地图初始化
         */
        this.Mapols = new Mapol({ id: ID2D }).map();
        let luqbian = Line(require("../assets/ststic/data/ldqbjdata.json"));
        let luqbians = Kml(require("../assets/ststic/data/sds.kml"));
        this.Mapols.addLayer(luqbian);
        this.Mapols.addLayer(luqbians);
    }
    /**
     * 更新当前场景
     * @param {*} sub 
     */
    setSecne = (sub) => {
        let { RouteLists, routeCurrect } = this.state;

        RouteLists[routeCurrect].status = false;

        RouteLists[sub].status = true;

        routeCurrect = sub;

        this.setState({
            RouteLists,
            routeCurrect,
            ScreenElement: RouteLists[sub].component
        });


    }
    /**
    * 皮肤面板展示
    */
    get ScreenElement() {
        const { ScreenElement, routeCurrect } = this.state;

        return (
            <ScreenElement
                Mapols={this.Mapols}
                MapCl={this.Mapols}
            />
        )
    }
    /**
     * 
     */
    render() {
        const {
            RouteLists
        } = this.state;
        return (
            <>

                <Header>
                    <HTitle
                        title={'WebGL数字城市建设'}
                    />
                    <HMenu
                        Menu={RouteLists}
                        onClick={this.setSecne}
                    />
                </Header>
                {this.ScreenElement}
                <BMap id={ID2D} />
            </>
        )
    }
}